<template>
    <div class="app-container">
        <header>
            <div>
                <el-form :model="form" label-width="120px" inline size="small">
                    <el-form-item label-width="60px" label="车牌号">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="车架号">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="是否报废">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left:30px">
                        <el-button type="primary" icon="el-icon-search" style="margin-left:40px">查询</el-button>
                        <el-button type="primary" icon="el-icon-plus" style="margin-left:40px">新增</el-button>
                        <el-button type="info" plain style="margin-left:40px">清空条件</el-button>
                    </el-form-item>
                </el-form>
                <div class="btn mb-2">
                    <div class="left">
                        <el-button type="info" plain size="small">设置转出</el-button>
                        <el-button type="info" plain size="small">取消转出</el-button>
                        <el-button type="info" plain size="small">设置报废</el-button>
                        <el-button type="info" plain size="small">取消报废</el-button>
                        <el-button type="info" plain size="small">导出</el-button>
                    </div>
                    <div class="right">
                        <!-- <el-tooltip class="item" effect="light" content="设置表格" placement="bottom"> -->
                        <el-button @click="isPover = true" size="small">列设置</el-button>
                        <!-- </el-tooltip> -->
                        <el-popover v-model="isPover" width="200" trigger="click" popper-class="pClass">
                            123
                        </el-popover>
                    </div>
                </div>
            </div>
        </header>

        <main>
            <div style="height: 630px;">
                <el-table :data="tableData" border style="width: 100%" height="100%">
                    <el-table-column type="selection" width="55" sortable align="center" />
                    <el-table-column prop="line" label="序号" sortable width="100" align="center" />
                    <el-table-column prop="car" label="车牌号" width="120" align="center">
                        <template slot-scope="scope">
                            <span style="color: #4d4de2;cursor: pointer;"
                                @click="go(scope.row, 'http://jx.qida999.com/DriverCommon/driver/dr_car.html')">{{
                                    scope.row.car }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="driver" label="司机" width="150" align="center" />
                    <el-table-column prop="spec" label="型号" width="250" align="center" />
                    <el-table-column prop="motor" label="发动机号" width="180" align="center" />
                    <el-table-column prop="frame" label="车架号" width="120" align="center" />
                    <el-table-column prop="buydate" label="购买登记日期" sortable width="200" align="center" />
                    <el-table-column prop="validity" label="有效期" sortable width="200" align="center" />
                    <el-table-column prop="YearCheck" label="年审到期" sortable width="200" align="center" />
                    <el-table-column prop="driverYearCheck" label="行驶证年审到期" sortable width="200" align="center" />
                    <el-table-column prop="quarterCheck" label="二级维护" width="150" align="center" />
                    <el-table-column prop="owner" label="车主名字" width="150" align="center" />
                    <el-table-column prop="company" label="车属单位" width="180" align="center" />
                    <el-table-column prop="registerDate" label="登记日期" sortable width="200" align="center" />
                    <el-table-column prop="editer" label="修改人" width="150" align="center" />
                    <el-table-column prop="edittime" label="修改时间" sortable width="200" align="center" />
                    <el-table-column prop="edittime" label="季审到期" sortable width="200" align="center" />
                    <el-table-column label="操作" align="center">
                        <el-button type="text" plain size="mini" class="el-icon-delete">删除</el-button>
                    </el-table-column>
                </el-table>
            </div>
        </main>

        <!-- 分页 -->
        <footer>
            <div class="pagin">
                <el-pagination background :current-page="initParams.page" :page-sizes="[20, 50, 100, 150]"
                    :page-size="initParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </footer>

    </div>
</template>

<script>
import { CarListAPI } from '@/api/adminstare'
import { oldLoginSystem } from '@/utils/publicMethod'

/**
* @author        Yng
* @time          2023-11-11 11:12:07  星期六
* @description   车辆信息
**/


export default {
    data() {
        return {
            isPover: false,
            form: {
                name: '',
                region: ''
            },
            tableData: [],
            total: 0,
            // 初始化参数
            initParams: {
                action: 'carList',
                carno: '',
                ep: '',
                frame: '',
                delmark: '',
                page: 1,
                pageSize: 20,
                sortStr: '',
            }
        }
    },
    mounted() {
        this.getCarList()
    },
    methods: {
        async getCarList() {
            let { data, code, total } = await CarListAPI(this.initParams)
            if (!code) {
                this.tableData = data
                this.total = total
            }
        },
        //  跳旧版详情
        go(val, URL) {
            const redirectUrl = `${URL}?car=${val.car}&aid=${this.$store.getters.userInfo.jxid}`
            const url = 'http://jx.qida999.com/DriverCommon/CommApiNew/login/Login.aspx'
            oldLoginSystem(redirectUrl, url)
        },
        // 一页几条数据
        handleSizeChange(val) {
            this.initParams.pageSize = val
            this.getCarList()

        },
        // 当前页
        handleCurrentChange(val) {
            this.initParams.page = val
            this.getCarList()
        },
    }
}
</script>

<style lang="scss" scoped>
.btn {
    display: flex;
    justify-content: space-between;

    ::v-deep.pClass {
        transform: translate(-110px, 0);
    }
}

main>div {
    height: 590px;
}
</style>